<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" label-width="120px" @keyup.enter.native="search">
        <el-col :span="6">
          <el-form-item :label="$t('m.out.waveordercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.waveordercode" placeholder></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.out.storeordercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.storeordercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordercode"></el-input>
          </el-form-item>
          <el-form-item label="SKU">
            <el-input maxlength="20" show-word-limit v-model="formInline.sku"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item :label="$t('m.state')">
            <el-select v-model="formInline.stateid" :placeholder="$t('m.choose')">
              <el-option v-for="item in states" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="SupplierCode">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
           <el-form-item :label="$t('m.pick.tasknumbercode')">
            <el-input maxlength="20" show-word-limit v-model="formInline.tasknumber" placeholder></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.out.priority')">
            <el-select v-model="formInline.priority" :placeholder="$t('m.choose')">
              <el-option v-for="item in priority" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
          <el-button @click="pickingWave" v-if="hasPermission('assign')">{{$t('m.out.pickingWave')}}</el-button>
        </el-col>
      </el-form>
    </el-row>
    <el-table
      ref="table"
      stripe
      empty-text
      fits
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="waveordercode" :label="$t('m.out.waveorder')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-waveorder')">
            <el-button @click.stop="getWaveorder(scope.row.waveorderid)" type="text">{{scope.row.waveordercode}}</el-button>
          </template>
          <template v-else>{{scope.row.waveordercode}}</template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('m.state')" align="center" prop="state"></el-table-column>
      <el-table-column :label="$t('m.out.pickingType')" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.pickingtype==1">{{$t('m.out.pickingtype1')}}</span>
          <span v-if="scope.row.pickingtype==2">{{$t('m.out.pickingtype2')}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="pickingtask" :label="$t('m.out.pickingtask')"></el-table-column>
      <el-table-column align="center" prop="orderqty" :label="$t('m.out.orderqty')"></el-table-column>
      <el-table-column align="center" prop="totalqty" :label="$t('m.out.totalqty')"></el-table-column>
      <el-table-column align="center" prop="createdate" :label="$t('m.createdate')"></el-table-column>
      <el-table-column align="center" prop="pickingdate" :label="$t('m.out.pickingdate')"></el-table-column>
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>

    <!-- 波次单 dialog 开始 -->
    <wavePopup v-if="wavePopupVisible" :popupVisible="wavePopupVisible" :isEdit="editArea" :detail="wavePopupDetail" @callback="init" @close="wavePopupVisible=false"></wavePopup>
    <!-- 波次单 dialog 结束 -->
  </div>
</template>

<script>
import common from '@/utils/common'
export default {
  name:'Wave',
  data(){
    return {
      editArea:false,
      formInline:{
        ordercode:'',
        waveordercode:'',
        sku:'',
        stateid:null,
        storeordercode:'',
        suppliercode:null,
        tasknumber:'',
        priority:''
      },

      tableData:[],
      dialogFormVisible1:false,
      shop:[],
      warehouse:[],
      region:[],

      waveForm:{
        ordercode:'',
        waveordercode:'',
        waveorderid:null,
        value:''
      },
      tarea:[],

      wavePopupVisible:false, // 波次单dialog显示隐藏
      wavePopupDetail:''
    }
  },
  filters:{
    // （1 待处理 2 待拣货 3 拣货中 4 已取消 5 已完成）
    stateFilter(value, lan){
      return [
        lan('m.quality.state1'),
        lan('m.out.state2'),
        lan('m.out.state3'),
        lan('m.review.state3'),
        lan('m.shelves.state5')
      ][value - 1]
    }
  },
  computed:{
    states(){
      return [
        { id:'', label:this.$t('m.all') },
        { id:1, label:this.$t('m.quality.state1') },
        { id:2, label:this.$t('m.out.state2') },
        { id:3, label:this.$t('m.out.state3') },
        { id:6, label:this.$t('m.out.state6') },
        { id:7, label:this.$t('m.out.finish') },
        { id:8, label:this.$t('m.sorting.state6') }
      ]
    },
    priority(){
      return[
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:0,
          label:this.$t('m.out.normal')
        },
        {
          id:1,
          label:this.$t('m.out.priority1')
        }
      ]
    }
  },
  components:{
    wavePopup:() => import('@/components/wave/wave-popup')
  },
  methods:{
    priorityFormatter(row){
      return row.priority == 1 ? this.$t('m.out.priority1') : this.$t('m.out.normal')
    },
    lan(arg){
      return this.$t(arg)
    },
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/waveorder/page',
        params:Object.assign({}, this.formInline, {
          page:this.page,
          rows:this.rowSize
        })
      }).then(({data})=> {
        for (let i = 0; i < data.records.length; i++){
          data.records[
            i
          ].createdate = common.timestampToTime(
            data.records[i].createdate
          )
          if (data.records[i].pickingdate){
            data.records[
              i
            ].pickingdate = common.timestampToTime(
              data.records[i].pickingdate
            )
          } else {
            data.records[i].pickingdate = '---'
          }
        }

        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
      })
    },
    search(){
      this.page = 1
      this.init()
    },

    pickingWave(){
      if (!this.tableRowSelected.length) return this.callbackMessage(`${this.$t('m.choose')}${this.$t('m.out.waveorder')}`)
      if (!(this.tableRowSelected.some((item) => item.stateid === 1)))
        return this.callbackMessage(this.$t('m.out.limitwave'))

      this.editArea = true // 编辑
      this.getWaveorder(this.tableRowSelected[0].waveorderid, true)
    },
    getWaveorder(id, isEdit){
      this.editArea = isEdit || false
      this.$axios({
        method:'get',
        url:`/waveorder/getWaveorderById?waveorderid=${id}`
      }).then(({ data }) => {
        this.wavePopupDetail = data
        this.wavePopupVisible = true
      })
    }
  },
  activated(){
    this.init()
  },
  beforeRouteLeave(to, form, next){
    this.wavePopupVisible=false
    this.dialogFormVisible1=false
    next()
  }
}
</script>
<style lang="scss" scoped>
.el-form-item--mini span {
  font-size: 10px;
}
.el-select {
  width: 100%;
}
.mainTable {
  overflow-y: scroll;
}
.waveList div.item {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
  padding: 0 5px;
}
.waveList div::-webkit-scrollbar {
  display: none;
}
.waveHead {
  margin-bottom: 30px;
}
.waveHead b {
  margin-right: 10px;
}
</style>